<template>
  <view class="layout" v-if="isShow">
    <view class="goBack" @click="goBack" :style="{top:statusBarHeight+'px'}">
      <uni-icons type="back" color="#fff" size="20"></uni-icons>
    </view>
    <score-view :score="score" @tap="addScoreClick"></score-view>
    <view class="content">
      <view class="title">
        <view class="bg">
          <image src="../../static/bg_title.png" mode="aspectFill"></image>
          <image class="wallet" src="../../static/ic_wallet.png" v-if="false" mode="aspectFill"></image>
        </view>
        <view class="info" :style="{top:20+'px'}">
          <view class="title1">
            {{title}}
          </view>
          <view class="title2">
            {{itemNums}}次机会最高中奖金币数100万
          </view>
          <view class="title3">
            {{itemDetail.subtitle}}
          </view>
        </view>
      </view>

      <view class="usernums" :style="{ height : numHeight + 'rpx'}">
        <view class="items">
          <view class="item" v-for="item in userNums"
               :style="{ border: item.isWin && isShowWinNums? '2px solid red' : 'none' }">
            <view class="winnum">
              <image :src="item.url" mode="aspectFill"></image>
            </view>
            <view class="money">
              ￥{{item.money}}
            </view>
          </view>
        </view>
        <canvas v-if="!isShowWin" class="canvas2" id="canvas2" disable-scroll=true canvas-id="canvas2" @touchstart="touchstart2"
                @touchmove="touchmove2" @touchend="touchend2"></canvas>
      </view>
    </view>

    <view class="menuBar" v-if="!isGaming">
      <view class="group" :style="{opacity:menuState?1:0,transform:menuState?'scaleY(1)':'scaleY(0)'}">
        <view class="item" hover-class="hoverItem" @click="autoPlayClick">
          <uni-icons type="checkbox" size="26"></uni-icons>
          <view class="text">自动刮奖</view>
        </view>

        <view class="item" hover-class="hoverItem" @click="autoPlayClickTen">
          <uni-icons type="loop" size="26"></uni-icons>
          <view class="text">连刮10张</view>
        </view>

        <view class="item" hover-class="hoverItem" @click="refreshBtnSubmit">
          <uni-icons type="upload" size="26"></uni-icons>
          <view class="text">再来一张</view>
        </view>

        <view class="item" hover-class="hoverItem" @click="soundBtnClick">
          <uni-icons v-if="isOpenSound" type="mic" size="26"></uni-icons>
          <uni-icons v-if="!isOpenSound" type="micoff" size="26"></uni-icons>
          <view class="text">音效</view>
        </view>
      </view>
      <view class="close" @click="closeMenu">
        <uni-icons type="closeempty" size="20" color="#fff" v-if="menuState"></uni-icons>
        <uni-icons type="list" size="20" color="#fff" v-else></uni-icons>
      </view>
    </view>



  <uni-popup ref="resultPopup" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
    <view class="resultPopup">
      <view class="bg win" v-if="winMoney!== 0">
        <view class="text">{{'恭喜您中得'+winMoney+'奖励'}}</view>
      </view>
      <view class="bg loser" v-else>
        <view class="text">{{'机会只留给有准备的人，\n再试一次吧！'}}</view>
      </view>
      <!-- <view class="doubelBtn" @click="doubelBtnSubmit" v-if="winMoney!== 0 && winMoney <= 10000 &&!isDouble">
        <button type="primary">奖励翻倍</button>
      </view> -->
      <view class="submitBtn" @click="onSubmit" v-if="winMoney!== 0 && winMoney <= 10000 &&!isDouble">
        <button type="primary">再来一次</button>
      </view>
      <view class="submitBtnLose" @click="onSubmit" v-if="winMoney == 0">
        <button type="primary">再来一次</button>
      </view>

      <view class="close" @click="closeResult">
        <uni-icons type="close" color="#eee" size="40"></uni-icons>
      </view>
    </view>
  </uni-popup>
  </view>


</template>

<script>
  import {
    getStatusBarHeight,
    getNavBarHeight,
    rpxToPx,
    pxToRpx
  } from "@/utils/system.js"
  import {
    onLoad,
    onShow,
    onReady,
    onBackPress
  } from "@dcloudio/uni-app"
  import {
    getTotalUserScore,
    getUserScoreFromCloud,
    saveUserTotalScoreToCloud,
    getUserScore,
    addUserScore,
    saveUserAddScoreToLocal,
    SignInGetScore,
    SignInGetScoreLocal
  } from '../../store/scoreManager.js'
  import {
    getOffMony,
    getOnMony,
    padZero,
    getPinyinWithNum,
    getRandomNum
  } from '../../utils/random.js'
  import {
    getTodayDateString,
    getTodayMonthString
  } from '../../utils/common.js'

  export default {
    data() {
      return {
        title: '',
        titleHeight: 0,
        numHeight: 0,
        isShowWin: false,
        content: "刮开覆盖膜，如果出现图案\"喜\"则获得该数字下的所示金额，如果出现图案\"囍\"则获得该数字下的所示金额的两倍。",
        tips: ' 设置奖项：￥10,000,000、￥5,000,000、￥2,000,000、￥1,000,000、￥500,000、￥100,000、￥50,000、￥10,000、￥1,000、￥500、￥200、￥100',
        openNums: [],
        userNums: [],
        viewWidth: 0,
        viewHeight: 0,
        score: 0,
        ctx: null,
        viewWidth2: 0,
        viewHeight2: 0,
        ctx2: null,
        points: [],
        points2: [],
        usertype: 0,
        winPoints: 0,
        userPoints: 0,
        itemtype: 0,
        resultPopup: null,
        winMoney: 0,
        itemNums: 0,
        instance: null,
        cost: -50,
        isShow: false,
        itemWidth: 55,
        startX: 0,
        startY: 0,
        isSignup: false,
        innerAudioContext: uni.createInnerAudioContext(),
        isShowWinNums: false,
        menuState: true,
        isOpenSound: true,
        isGameFinish: false,
        isGaming: false,
        totalWinMoneys: 0,
        totalGameTimes: 0,
        isNoMonyes: false,
        timer: null,
        isMenuToolEnable: true,
        adType: 0,
        isGameReady: false,
        interstitialAd: null,
        videoAd: null,
        isDouble: false,
		statusBarHeight:0
      };
    },
    mounted() {
      this.drawInit2();
	  this.statusBarHeight = getStatusBarHeight();
    },
    methods: {
      closeMenu() {
        this.menuState =!this.menuState;
      },
      autoPlayClick() {
        this.adType = 3;
        if (this.isMenuToolEnable === false) {
          if (this.videoAd) {
            this.videoAd.show().catch(() => {
              // 失败重试
              this.videoAd.load()
              .then(() => this.videoAd.show())
              .catch(err => {
                  console.error('激励视频 广告显示失败', err);
                  uni.showToast({
                    title: '广告拉取失败，请检查网络状况后重试',
                    icon: "none",
                    duration: 1500
                  });
                });
            });
          }
        } else {
          // 停止老的计时器
          if (this.timer) {
            clearInterval(this.timer);
          }
          if (this.isGameFinish === true) {
            if (this.isGameReady === false) {
              this.refreshBtnSubmit();
              setTimeout(() => {
                this.singleAutoPlay();
              }, 600);
            } else {
              this.singleAutoPlay();
            }
          } else {
            this.singleAutoPlay();
          }
        }
      },
      singleAutoPlay() {
        this.isGaming = true;
        let startX = 0;
        let startY = 0;
        this.timer = setInterval(() => {
          this.ctx2.clearRect(startX, startY, 150, 150);
          this.ctx2.draw(true);
          startX = startX + 50;

          if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
            startY += 120;
            startX = 0;
          }
          if (pxToRpx(startY) >= this.numHeight) {
            clearInterval(this.timer);
            this.autoCheckShowAnwser();
            startX = 0;
            startY = 0;
            this.isGaming = false;
          }
        }, 50);
      },
      singleAutoPlayNotCheck() {
        let startX = 0;
        let startY = 0;
        this.timer = setInterval(() => {
          this.isShowWinNums = true;

          this.ctx2.clearRect(startX, startY, 150, 150);
          this.ctx2.draw(true);
          startX = startX + 50;

          if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
            startY += 120;
            startX = 0;
          }
          if (pxToRpx(startY) >= this.numHeight) {
            clearInterval(this.timer);
            this.isGameReady = false;
            this.isGameFinish = true;
            this.totalWinMoneys += this.winMoney;
            this.winMoney = 0;
            this.isShowWinNums = true;
            startX = 0;
            startY = 0;
            this.tenTimesAutoPlayGame();
          }
        }, 50);
      },
      autoPlayClickTen() {
        this.adType = 3;
        if (this.isMenuToolEnable === false) {
          if (this.videoAd) {
            this.videoAd.show().catch(() => {
              // 失败重试
              this.videoAd.load()
              .then(() => this.videoAd.show())
              .catch(err => {
                  console.error('激励视频 广告显示失败', err);
                  uni.showToast({
                    title: '广告拉取失败，请检查网络状况后重试',
                    icon: "none",
                    duration: 1500
                  });
                });
            });
          }
        } else {
          this.isGaming = true;
          this.totalWinMoneys = 0;
          this.totalGameTimes = 0;
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.tenTimesAutoPlayGame();
        }
      },
      tenTimesAutoPlayGame() {
        if (this.totalGameTimes!== 10) {
          this.totalGameTimes += 1;
          if (this.isGameFinish === true) {
            this.refreshBtnSubmit();
            // 判断是否没钱了
            if (this.isNoMonyes === false) {
              setTimeout(() => {
                this.singleAutoPlayNotCheck();
              }, 600);
            } else { //没钱提前结束游戏
              this.totalGameTimes = 10;
              this.isGaming = false;
              this.winMoney = this.totalWinMoneys;
              this.autoCheckShowAnwser();
            }
          } else {
            this.singleAutoPlayNotCheck();
          }
        } else {
          this.winMoney = this.totalWinMoneys;
          this.autoCheckShowAnwser();
          this.isGaming = false;
        }
      },
      soundBtnClick() {
        this.isOpenSound =!this.isOpenSound;
        uni.setStorageSync("isOpenSound", this.isOpenSound);
      },
      async autoCheckShowAnwser() {
        if (this.isOpenSound === true) {
          if (this.winMoney!== 0) {
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = false;
            innerAudioContext.src = "/static/audio/huanhu.mp3";
            innerAudioContext.play();
          } else {
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = false;
            innerAudioContext.src = "/static/audio/kexi.mp3";
            innerAudioContext.play();
          }
        }
        this.isGameReady = false;
        this.isShowWin = true;
        this.isShowWinNums = true;
        this.isGameFinish = true;
        setTimeout(() => {
          this.resultPopup.open();
          this.score = this.addUserScore(this.winMoney, this.itemtype);
        }, 1000);
      },
      goBack() {
        // drawInit();
        // 停止刮奖
        if (this.timer) {
          clearInterval(this.timer);
        }

        uni.navigateBack({
          success: () => {

          },
          fail: () => {
            uni.reLaunch({
              url: '/pages/index/shouye'
            });
          }
        });
      },
      onBackPress(options) {
        // 点击虚拟键或者侧滑的时候触发（不允许返回）
        if (options.from === 'backbutton') {
          return true;
        }
        // 否则则允许返回
        return false;
      },
      onLoad(e) {
        this.isNewUser = e.isNewUser;
        this.itemDetail = JSON.parse(e.itemDetail);
        this.title = this.itemDetail.name;
        if (!this.itemDetail.title ||!this.itemDetail.cost) {
          uni.reLaunch({
            url: '/pages/detail/detail0' + '?title=平安喜乐'
          });
          return;
        }
        this.isShow = true;
        this.titleHeight = getStatusBarHeight() + 10;
        this.numHeight = pxToRpx(uni.getWindowInfo().screenHeight - getNavBarHeight()) - (350 + 20);
        this.itemNums = Math.floor(this.numHeight / 120.0) * 5;
        setTimeout(() => {
          this.creatNums();
        }, 1000);

        // 在页面onLoad回调事件中创建激励视频广告实例
        if (wx.createRewardedVideoAd) {
          this.videoAd = wx.createRewardedVideoAd({
            adUnitId: 'adunit-68d6f70cfd097fdb'
          });
          this.videoAd.onLoad(() => {});
          this.videoAd.onError((err) => {
            console.error('激励视频光告加载失败', err);
          });
          this.videoAd.onClose((res) => {
            // 用户点击了【关闭广告】按钮
            if (res && res.isEnded) {
              // 正常播放结束，可以下发游戏奖励
              if (this.adType === 1) {
                this.score = saveUserAddScoreToLocal(1000, 1);
              } else if (this.adType === 2) {
                this.score =saveUserAddScoreToLocal(this.winMoney, 99);
                this.isDouble = true;
              } else if (this.adType === 3) {
                const dayString = getTodayDateString();
                uni.setStorageSync("isEnableMenuTool" + this.title, dayString);
                this.isMenuToolEnable = true;
              }

            } else {
              if (this.adType === 1) {
                uni.showToast({
                  title: '未获得奖励，每次完成广告观看可获得1000金币奖励',
                  icon: "none",
                  duration: 2000
                });
              } else if (this.adType === 2) {
                // 播放中途退出，不下发游戏奖励
                uni.showToast({
                  title: '未获得奖励，观看完成可获得当前得奖的双倍奖励！',
                  icon: "none",
                  duration: 2000
                });
              } else if (this.adType === 3) {
                // 播放中途退出，不下发游戏奖励
                uni.showToast({
                  title: '未获得奖励，仅观看一次广告，全天可用！',
                  icon: "none",
                  duration: 2000
                });
              } else {
                uni.showToast({
                  title: '中途退出，未获得奖励！',
                  icon: "none",
                  duration: 2000
                });
              }
            }
          });
        }
      },
      doubelBtnSubmit() {
        this.adType = 2;
        this.isSignup = false;
        if (this.videoAd) {
          this.videoAd.show().catch(() => {
            // 失败重试
            this.videoAd.load()
           .then(() => this.videoAd.show())
           .catch(err => {
                console.error('激励视频 广告显示失败', err);
                uni.showToast({
                  title: '广告拉取失败，请检查网络状况后重试',
                  icon: "none",
                  duration: 1500
                });
              });
          });
        }

        // 在页面onLoad回调事件中创建插屏广告实例
        if (wx.createInterstitialAd) {
          this.interstitialAd = wx.createInterstitialAd({
            adUnitId: 'adunit-1722f7e6276cc54a'
          });
          this.interstitialAd.onLoad(() => {});
          this.interstitialAd.onError((err) => {
            console.error('插屏广告加载失败', err);
          });
          this.interstitialAd.onClose(() => {});
        }
      },
      loadHomeAd() {
        if (this.itemDetail.isShowAds === false) {
          return;
        }
        const key = "detail-AD" + this.itemDetail.type;
        const count = uni.getStorageSync(key);
        const day = getTodayDateString();
        if (count) {
          const c = count.split("--");
          if (c[0] === day) {
            if (Number(c[1]) < this.itemDetail.adTimes) {
              this.loadAD();
              uni.setStorageSync(key, day + "--" + (Number(c[1]) + 1));
            }
          } else {
            this.loadAD();
            uni.setStorageSync(key, day + "--" + 1);
          }
        } else {
          this.loadAD();
          uni.setStorageSync(key, day + "--" + 1);
        }
      },
      loadAD() {
        console.error('加载插屏广告');
        // 在适合的场景显示插屏广告
        if (this.interstitialAd) {
          this.interstitialAd.show().catch((err) => {
            console.error('插屏广告显示失败', err);
          });
        }
      },
      addScoreClick() {
        userInfo.score = SignInGetScoreLocal();
        return;
        this.adType = 1;
        if (this.videoAd) {
          this.videoAd.show().catch(() => {
            // 失败重试
            this.videoAd.load()
           .then(() => this.videoAd.show())
           .catch(err => {
                console.error('激励视频 广告显示失败', err);
                uni.showToast({
                  title: '广告拉取失败，请检查网络状况后重试',
                  icon: "none",
                  duration: 1500
                });
              });
          });
        }
      },
      getViewHW2() {
        return new Promise((resolve, reject) => {
          const info = uni.createSelectorQuery().in(this.instance).select(".usernums");
          info.boundingClientRect((data) => {
            this.viewWidth2 = data.width;
            this.viewHeight2 = data.height;
            resolve();
          }).exec(() => {});
        });
      },
      drawInit2() {
        this.getViewHW2().then(() => {
          this.ctx2 = uni.createCanvasContext('canvas2', this.instance);
          this.ctx2.clearRect(0, 0, this.viewWidth2, this.viewHeight2);
          this.ctx2.setFillStyle('#bbb'); // 填充颜色
          this.ctx2.fillRect(0, 0, this.viewWidth2, this.viewHeight2); // 填充区域（x,y,宽,高）
          let x = 0;
          let y = 0;
          for (let i = 0; i < this.viewHeight2 / this.itemWidth + 1; i++) {
            y = i * (this.itemWidth + 15);
            for (let j = 0; j < this.viewWidth2 / this.itemWidth + 1; j++) {
              x = j * (this.itemWidth + 15);
              this.ctx2.drawImage('../../static/ic_wallet.png', x, y, this.itemWidth, this.itemWidth);
            }
          }

          this.ctx2.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
        });
      },
      closeResult() {
        this.resultPopup.close();
      },
      refreshBtnSubmit() {
        if (this.isGameReady === false) {
          return this.onSubmit();
        }
        return true;
      },
      onSubmit() {
        if (this.score >= 50) {
          this.isGameReady = true;
          this.score = this.addUserScore(this.cost);
          this.resultPopup.close();
          this.winMoney = 0;
          this.isNoMonyes = false;
          this.isShowWinNums = false;

          this.isShowWin = false;
          this.isDouble = false;
          this.ctx = null;
          this.points = [];
          this.ctx2 = null;
          this.points2 = [];
          this.winPoints = 0;
          this.userPoints = 0;
          setTimeout(() => {
            if (this.score >= 0) {
              this.creatNums();
              this.drawInit2();
            }
          }, 500);
          return true;
        } else {
          this.isGameReady = false;
          this.isNoMonyes = true;
          this.resultPopup.close();
          uni.showToast({
            title: '您的金币不够了，点击上方金币"+"按钮增加1000金币。',
            icon: "none",
            duration: 2000
          });
          return false;
        }
      },
      creatNums() {
        let open = this.itemDetail.winNumObjs;
        let user = [];
        // 可以中两个数的概率
        let isDoble = getRandomNum(this.itemDetail.doubleRate) > 1000;
        let isContainWin = true;
        // while循环添加数字 {"winNum":7,"multiple":1}
        while (user.length!== this.itemNums) {
          // getRandomNumExcepts(99,open)
          // 按照中奖率的数字获取随机数
          const num = getRandomNum(this.itemDetail.numRate);
          const winNum = open.find(item => item.winNum === num);
          if (winNum) {
            if (isContainWin) {
              user.push(num);
              isContainWin = false;
            } else if (isDoble) {
              user.push(num);
              isDoble = false;
            }
          } else {
            // 填充不中奖的数字
            if (num < 100) {
              user.push(num);
            }
          }
        }

        // 新用户必中1个
        if (this.isNewUser === true && isContainWin === true) {
          user[getRandomNum(20)] = open[0].winNum;
          console.log("新用户");
        }

        this.userNums = [];
        // 获取索引
        for (let index in user) {
          // 中奖
          let money = "";
          let isWin = false;
          const temp = user[index];
          const winNum = open.find(item => item.winNum === temp);
          if (winNum) {
            money = getOnMony(this.itemDetail.winRate, this.itemDetail.winsMoney);
            this.winMoney += money * winNum.multiple;
            isWin = true;
          } else {
            money = getOffMony(this.itemDetail.winsMoney);
          }

          const item = {
            url: "",
            money,
            isWin
          };

          this.userNums.push(item);
        }
      },
      touchstart2(e) {
        this.startX = e.changedTouches[0].x;
        this.startY = e.changedTouches[0].y;
      },
      touchmove2(e) {
        let moveX = e.changedTouches[0].x;
        let moveY = e.changedTouches[0].y;
        this.userPoints = this.userPoints + 1;

        let currentStartX = e.changedTouches[0].x;
        let currentStartY = e.changedTouches[0].y;

        this.ctx2.clearRect(this.startX, this.startY, 100, 100);

        this.ctx2.draw(true);
        this.startX = e.changedTouches[0].x;
        this.startY = e.changedTouches[0].y;
      },
      touchend2(e) {
        this.chechShowAnwser();
      },
      chechShowAnwser() {
        if (this.userPoints >= 200) {
          this.isShowWin = true;
          this.isShowWinNums = true;
          if (this.isOpenSound === true) {
            setTimeout(() => {
              if (this.winMoney!== 0) {
                const innerAudioContext = uni.createInnerAudioContext();
                innerAudioContext.autoplay = false;
                innerAudioContext.src = "/static/audio/huanhu.mp3";
                innerAudioContext.play();
              } else {
                const innerAudioContext = uni.createInnerAudioContext();
                innerAudioContext.autoplay = false;
                innerAudioContext.src = "/static/audio/kexi.mp3";
                innerAudioContext.play();
              }
            }, 500);
          }
          this.isGameReady = false;
          this.isGameFinish = true;
          this.isShowWin = true;
          this.isShowWinNums = true;
          setTimeout(() => {
            this.resultPopup.open();
            this.score = this.addUserScore(this.winMoney, this.itemtype);
          }, 1000);
        } else {
          this.isShowWin = false;
          this.isShowWinNums = false;
        }
      }
    },
    created() {
      this.innerAudioContext.autoplay = false;
      this.innerAudioContext.src = "/static/audio/gua.m4a";
    },
    onShow() {
      // score.value = getTotalUserScore();
      this.score = getUserScore();
      this.loadHomeAd();
      // 获取音效开关
      this.isOpenSound = uni.getStorageSync("isOpenSound");
      const menuValueString = uni.getStorageSync("isEnableMenuTool" + this.title);
      const dayString = getTodayDateString();
      if (menuValueString && menuValueString === dayString) {
        this.isMenuToolEnable = true;
      } else {
        this.isMenuToolEnable = true;
      }
    }
  };
</script>


// <!-- // scss 语言类型  scoped css样式的类名仅限当前页面 不污染其它页面 -->
<style lang="scss">
	@font-face {
		font-family: NumFont;
		src: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/font/HONORSans-Bold.ttf');
	}

	.layout {
		width: 100%;
		height: 100vh;
		background-color: #ff0000;
		position: relative;

		.goBack {
			position: fixed;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}




		.content {
			// width: 100%;
			height: calc(100vh - 40rpx);
			background-color: #de3018;
			margin-top: 0rpx;
			border: 20rpx solid #ff0000;
			box-sizing: content-box;
			border-radius: 20px;
			overflow: hidden;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
				position: relative;
				width: 100%;

				.bg {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.title1 {
						width: 100%;
						font-size: 110rpx;
						font-weight: bold;
						text-align: center;
						color: #ffe21d;
						// color: white;
					}

					.title2 {
						width: 80%;
						font-size: 18px;
						text-align: center;
						color: #de3018;
						background-color: #ffe21d;
						padding: 0 20rpx;
					}

					.title3 {
						width: 100%;
						margin-top: 20rpx;
						font-size: 14px;
						text-align: center;
						color: #ffe21d;
						padding: 0 20rpx;
					}
				}
			}

			.usernums {
				margin-top: 380rpx;
				position: relative;
				width: 95%;
				background-color: #d8d7d7;
				border: 10rpx solid #008B8B;

				.items {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					row-gap: 10rpx;
					column-gap: 20rpx;
					padding: 5rpx;

					.item {
						width: 110rpx;
						height: 110rpx;
						// background-color: #d1d0d0;
						border-radius: 50%;

						.winnum {
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: 10rpx;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.money {
							font-size: 22rpx;
							text-align: center;
							color: black;
							font-weight: bold;
							margin-top: 0rpx;
						}
					}
				}

				.canvas2 {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

			}

		}

		.menuBar {
			z-index: 100;
			position: fixed;
			bottom: 20px;
			right: 50%;
			transform: translateX(50%);
			display: flex;
			align-items: center;
			flex-direction: row;
			.group {
				display: grid;
				grid: auto-flow / 1fr 1fr 1fr 1fr;
				gap: 30rpx;
				transition: 0.3s;
				transform-origin: right center;
		
				.item {
					background: #ffe21d;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: 2px solid #de3018;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.6);
					.text {
						margin-top: -5rpx;
						font-size: 23rpx;
						transform: scale(0.85);
					}
				}
		
				.hoverItem {
					transform: scale(0.95);
				}
			}
		
			.close {
				width: 70rpx;
				height: 70rpx;
				background: rgba(0, 0, 0, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0rpx;
				line-height: 1em;
				margin-left: 20px;
			}
		}
	}


	.resultPopup {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 150rpx;

		.bg {
			background: no-repeat center;
			background-size: cover;
			position: relative;
		}

		.win {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_win_2.png');
			background-size: 500rpx 655rpx;

			.text {
				line-height: 120rpx;
				text-align: center;
				position: absolute;
				width: 100%;
				top: 605rpx;
				left: 0;
				color: #fff;
				font-size: 46rpx;
				font-weight: bolder;
			}
		}

		.loser {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_lose_2.png');
			background-size: 500rpx 605rpx;

			.text {
				line-height: 80rpx;
				text-align: center;
				position: absolute;
				padding: 0 160rpx;
				width: 100%;
				top: 545rpx;
				left: 0;
				color: #fff;
				font-size: 40rpx;
				font-weight: bolder;
			}
		}

		.submitBtn {
			width: 30%;
			margin-top: 40rpx;
			border-radius: 10rpx;
			button {
				background: transparent;
				font-size: 25rpx;
			}
		}
		.submitBtnLose {
			width: 60%;
			margin-top: -160rpx;
		
			button {
				background: #ee4626;
			}
		}
		
		.doubelBtn {
			width: 60%;
			margin-top: -160rpx;
		
			button {
				background: #F5D54D;
				color: #F5514d;
			}
		}

		.close {
			position: absolute;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			// background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			backdrop-filter: blur(10rpx);
			// border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
			right: 100rpx;
			top: 200rpx;
		}
	}

	.footer {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>